

<!-- 商品列表-大图模式 -->
<template name="goodList">
	<view id="goodList" class="good_list">
		<view class="list-pages">
			<view class='list-block' v-for='(item,index) of list' :key='item.goodsCd' @click="gotoDetail(item.activityType, item.goodsCd)">
				<view class='list-intro' v-if='item.tips'>{{item.tips}}</view>
				
				<!-- 商品封面 -->
				<view class='list-poster'>
					<image class="poster" lazy-load="true" :src='imgSite + item.coverPicture'></image>
					<image v-if="item.activityCornerPicture" class="corner" :src='imgSite + item.activityCornerPicture' mode="widthFix"></image>
				</view>
				
				<!-- 商品名 -->
				<view class='list-title ellipsis2'>
<!--					<text class='list-ourself' v-if='item.selfSupporting == 0'>自营</text>-->
					<text class="list-title-name">{{item.goodsName}}</text>
				</view>
				
				<!-- 商品标签 -->
				<view class='list-tips'>
					
					<!-- 2：秒杀 5：砍价 6：拼团 -->
					<view class='goodsLabel seckill' v-if='item.activityType == 2'>秒杀</view>
					<view class='goodsLabel bargain' v-if='item.activityType == 5'>砍价</view>
					<view class='goodsLabel preGroup' v-if='item.activityType == 6'>拼团预售</view>
					
					<!--  10 保税商品 20 优惠劵  30 赠品 40 满减 -->
					<view class='goodsLabel' :class="[label.labelId]" v-for="(label, i) in goodsLabelFilter(item.goodsLabel)">{{label.labelName}}</view>
				</view>
				
				<!-- 商品价格 -->
				<view class='list-price'>
					<!-- 销售策略 10：现金 20：现金＋积分 40：积分 60:水券 70:水券 + 现金 -->
					<view v-if="item.salesStrategy == 10" class='list-price-left'>
						<text>¥</text>
						<text>{{item.salesPrice / 100}}</text>
					</view>
					<view v-if="item.salesStrategy == 20" class='list-price-left'>
						<text>¥</text>
						<text>{{item.salesPrice / 100}}</text>
<!--						<text v-if="item.salesPoint">-->
<!--							<text style="font-size: 20rpx;">+</text>-->
<!--							<text>{{ item.salesPoint }}</text>-->
<!--							<text style="font-size: 20rpx;">积分</text>-->
<!--						</text>-->
					</view>
<!--					<view v-if="item.salesStrategy == 40" class='list-price-left'>-->
<!--						<text v-if="item.salesPoint">-->
<!--							<text>{{ item.salesPoint }}</text>-->
<!--							<text style="font-size: 20rpx;">积分</text>-->
<!--						</text>-->
<!--					</view>-->
<!--					<view v-if="item.salesStrategy == 60" class='list-price-left'>-->
<!--						<text v-if="item.waterCoupon">-->
<!--							<text>{{ item.waterCoupon / 100}}</text>-->
<!--							<text style="font-size: 20rpx;">水券</text>-->
<!--						</text>-->
<!--					</view>-->
<!--					<view v-if="item.salesStrategy == 70" class='list-price-left' style="white-space: nowrap;">-->
<!--						<text>¥</text>-->
<!--						<text>{{item.salesPrice / 100}}</text>-->
<!--						<text v-if="item.waterCoupon">-->
<!--							<text style="font-size: 20rpx;">+</text>-->
<!--							<text>{{ item.waterCoupon / 100 }}</text>-->
<!--							<text style="font-size: 20rpx;">水券</text>-->
<!--						</text>-->
<!--					</view>-->
					<view v-if="item.salesStrategy == 100" class='list-price-left'>
						<text>¥</text>
						<text>{{item.salesPrice / 100}}</text>
					</view>
					
					<view class='list-price-right' style="white-space: nowrap;">
						{{item.praise}}%好评
					</view>
				</view>
				<view class='list-orign-price'>
					¥{{item.marketPrice / 100}}
				</view>
				
				
				<!-- 销售专区 -->
				<!-- 销售专区 10：购物专区 30：积分专区 50:会员专区 (对应PC芬尼湾V卡) 60:水券专区 -->
				<view v-if="item.salesStrategy != 100 && getShowMemberFlag(item)">
					<view v-if="item.memberName && item.memberPrice" class='list-vip-price'>
						<view class='list-vip-price-left'>
							{{item.memberName}}
						</view>
						<view class='list-vip-price-right'>
							¥{{item.memberPrice / 100}}
						</view>
					</view>
				</view>
				<view v-else class='list-vip-price' style="visibility: hidden;">
					<view class='list-vip-price-left'>
						<view>
							1
						</view>
					</view>
					<view class='list-vip-price-right'>
						<view>
						</view>
					</view>
				</view> 
				
				
				<!-- 底部店名，进店 -->
				<view v-if="isShop != 1" @click.stop="__todoDev__(item.vendorId)" class='list-vip-price'>
					<view class='list-store-name'>
						{{item.vendorName}}
					</view>
					<view class='list-store-go'>
						<view class="desc borderOneRpx">
							进店
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	
	export default {
		props: {
			list: {
				type: null,
				default: ''
			},
			isShop: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				hover: false
			}
		},
		computed: {
			...mapState(['imgSite'])
		},
		methods: {
			
			// 显示会员价逻辑
			getShowMemberFlag(item) {
				if(item.customerLevelId
					&& (item.salesStrategy == 10 || item.salesStrategy == 20 || item.salesStrategy == 70)
					&& (item.memberName && item.memberPrice)) {
						
					return true;
				}else {
					return false;
				}
			},
			
			
			gotoDetail(activityType, id) {
				
				// 2：秒杀活动 5：砍价 6：拼团预售
				if(activityType) {
					if(activityType == 2) {
						uni.navigateTo({
							url: '/pages/detail/seckill?id=' + id
						});
					}
					if(activityType == 5) {
						uni.navigateTo({
							url: '/pages/detail/bargain?id=' + id
						});
					}
					if(activityType == 6) {
						uni.navigateTo({
							url: '/pages/detail/preGroup?id=' + id
						});
					}
				}else {
					uni.navigateTo({
						url: '/pages/detail/detail?id=' + id
					});
				}
			},
			
			__todoDev__(vendorId) {
				uni.navigateTo({
					url:'/pagesGoods/shop/shopDetail?vendorId='+vendorId
				})
			},
			
			
			//标签格式化
			goodsLabelFilter(goodsLabel) {
				
				if(!goodsLabel) {
					return ;
				}
				
				var labelArray = goodsLabel.split(",");
				
				var labelList = [];
				for(var i = 0; i < labelArray.length; i++) {
					
					labelList.push({
						labelId: "label_"+labelArray[i],
						labelName: {
							"10": "保税商品",
							"20": "优惠券",
							"30": "赠品",
							"40": "满减",
						}[labelArray[i]]
					});
				}
				
				return labelList;
			}
		}
	}
</script>

<style lang="scss">
		
	.good_list {
		margin: 0 auto 0 auto;
		width: 100%;
	}
	.list-pages {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}
	
	.list-block {
		width: 330rpx;
		background: white;
		border-radius: 10upx;
		position: relative;
		padding-bottom: 20rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		/* margin-top: 20rpx; */
	}
	
	.list-intro {
		position: absolute;
		height: 48rpx;
		background: rgba(253, 104, 31, .8);
		color: white;
		z-index: 2;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 23rpx;
		top: 282rpx;
	}
	
	.list-hover {
		position: absolute;
		width: 330rpx;
		height: 330rpx;
		z-index: 3;
		top: 0;
	}
	
	.list-poster {
		position: relative;
		width: 330rpx;
		height: 330rpx;
		
		.poster {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
		
		.corner {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
	}
	
	.list-title {
		width: 92%;
		height: 70rpx;
		background: white;
		margin: 0 0 0 4%;
		margin-top: 10rpx;
		line-height: 30rpx;
		overflow: hidden;
	}
	
	.list-title-name {
		font-size: 24rpx;
		color: #333333;
	}
	
	.list-ourself {
		margin-right: 12rpx;
		background: #D21728;
		color: white;
		font-size: 21rpx;
		// padding: 3.5rpx 7rpx 3.5rpx 7rpx;
		border-radius: 3rpx;
		height: 30rpx;
		position: relative;
		top: -5rpx;
		
		display: inline-block;
		width: 50rpx;
		height: 24rpx;
		line-height: 24rpx;
		text-align: center;
		font-size: 18rpx;
	}
	
	.list-tips {
		display: flex;
		flex-wrap: wrap;
		width: 92%;
		margin: 0 0 0 4%;
		background: white;
	}
	
	.list-price {
		display: flex;
		justify-content: space-between;
		width: 92%;
		margin: 10rpx 0 0 4%;
	}
	
	.list-price-left {
		/* width: 50%; */
		font-size: 30rpx;
		color: #D21728;
	}
	
	.list-price-right {
		/* width: 50%; */
		text-align: right;
		font-size: 20rpx;
		color: #999999;
		position: relative;
		top: 10rpx;
	}
	
	.list-orign-price {
		margin-left: 4%;
		text-decoration: line-through;
		font-size: 20rpx;
		color: #999999;
	}
	
	.list-vip-price {
		display: flex;
		width: 92%;
		margin: 10rpx 0 0 4%;
	}
	
	.list-vip-price-left {
		font-size: 22rpx;
		white-space: nowrap;
		background: #182046;
		color: #FDD455;
		padding: 0 15rpx 0 15rpx;
		border-radius: 22rpx 0 0 22rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	
	.list-vip-price-right {
		font-size: 22rpx;
		padding-right: 15rpx;
		white-space: nowrap;
		color: #182046;
		background: #FDD455;
		border-radius: 0 22rpx 22rpx 0;
		padding-left: 10rpx;
		display: flex;
		align-items: center;
	}
	
	.list-store-name {
		font-size: 20rpx;
		color: #666;
		width: 76%;
		white-space: nowrap;
		overflow: hidden;
	}
	
	.list-store-go {
		width: 16%;
		text-align: right;
	}
	
	.desc {
		position: relative;
		width: 70rpx;
		height: 34upx;
		line-height: 34upx;
		text-align: center;
		font-size: 20rpx;
		font-family: PingFang SC;
		color: #999;
	}
	
	.desc.borderOneRpx:after {
		border-color: #DBDBDB;
		border-radius: 34rpx;
	}
</style>




